<template>
	<view id="attention-public-page">
		<view class="qrcode-box" @click="saveImg">
			<image class="img" :src="publicImg" mode=""></image>
		</view>
		<view class="step-box">
			<view class="title">步骤:</view>
			<view class="step-text">1.长按二维码</view>
			<view class="step-text">2.点击识别二维码或者保存图片到本地用微信扫一扫打开</view>
			<view class="step-text">3.关注公众号后返回此页面点击确定</view>
		</view>
		<view class="tips-box">
			<view class="title">提示</view>
			<view class="tips-1">1.请确保你想绑定的微信是实名认证，该微信将是你的收款微信；</view>
			<view class="tips-2">2.请严格保管此二维码，谨防泄露。一人一码，若有泄露，将导致资金流出至他人账户</view>
		</view>
		<view>
			<button class="refresh-btn" @click="refreshPage" :loading="loading" :disabled="loading">确定</button>
		</view>
	</view>
</template>

<script>
	import {
	    mapState
	} from 'vuex';
	import {apiWeChatOfficialAccount,apiAppWeChat} from '../../../http/apis.js'
	export default {
		computed: {
			...mapState(['token'])
		},
		data(){
			return {
				loading: false,
				publicImg: '',
				mobilePlatformType: '',
				officialAccountId: ''
			}
		},
		onLoad() {

		},
		onShow() {
			apiWeChatOfficialAccount({
			    token: this.token
			}).then(res =>{
			    if(res.data.code == 1)  {
					this.publicImg = res.data.msg.qrcode
					this.officialAccountId = res.data.msg.officialAccountId
				}
			}).catch(res => {
				this.$msg.showToast(res.data.msg)
			})
			this.mobilePlatformType = uni.getStorageSync('mobilePlatformType')
		},

		methods:{
			saveImg(url){
				if(this.mobilePlatformType == 'APP'){
					uni.showLoading({
						title: '下载中',
						mask: true
					})
					let filename = Math.random() +".png"
					plus.downloader.createDownload(this.publicImg, {
					    filename:"_downloads/"+filename
					 }, (download,status)=>{
					    if(status==200){//下载成功
					       plus.gallery.save( download.filename, ()=>{
					            uni.hideLoading();
					            uni.showToast({
					                title: '下载成功！'
					           });
					        })
					   }
					}).start()
				}

			},
			refreshPage(){
				this.loading = true
				apiAppWeChat({
				    token: this.token,
					officialAccountId: this.officialAccountId
				}).then(res =>{
					this.loading = false
				  if(res.data.code == 1)  {
						this.$msg.showToast('关注成功')
						setTimeout(() => {
							uni.switchTab({
								url: '../home/home'
							})
						}, 1000);
					} else if((res.data.code == -1) && (res.data.msg === "请先扫码关注公众号")) {
            uni.showModal({
              title: '提示',
              content: '注册微信不是本微信，可跳转页面，更换微信',
              success: function (res) {
                if (res.confirm) {
                  uni.navigateTo({
                    url: "../set/set"
                  })
                }
              }
            });
				  } else {
						this.$msg.showToast(res.data.msg)
					}
				}).catch(res => {
					this.loading = false
					this.$msg.showToast(res.data.msg)
				})
			}
		}

	}
</script>

<style lang="scss">
	page{
		background:rgba(247,247,247,1);
	}
	#attention-public-page{
		.qrcode-box {
			text-align: center;
			margin-top: 32upx;
			margin-bottom: 16upx;
			.img {
				width: 336upx;
				height: 336upx;
			}
		}
		.step-box {
			margin: 0 80upx;
			background: #FFFFFF;
			padding: 24upx 32upx;
			.title {
				font-size: 28upx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height: 30upx;
				margin-bottom: 10upx;
			}
			.step-text {
				font-size: 28upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color: #9c9c9c;
				line-height: 40upx;
			}
		}
		.tips-box {
			margin: 26upx 80upx;
			background: #FFFFFF;
			padding: 32upx;
			.title {
				font-size: 28upx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height: 30upx;
			}
			.tips-1 {
				font-size: 28upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color: #9c9c9c;
				line-height: 40upx;
				margin-top: 16upx;
			}
			.tips-2 {
				font-size: 28upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color: $theme-color;
				line-height: 40upx;
				margin-top: 16upx;
			}
		}
		.refresh-btn {
			margin: 0 80upx;
			height: 96upx;
			line-height: 96upx;
			border-radius: 10upx;
			background: $theme-background-color;
			font-size: $font-lg;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
	}
</style>
